<template>
  <el-form
    :inline="true"
    :model="searchObj"
    class="form-inline searchForm"
    size="mini"
    @submit.native.prevent
  >
    <div
      v-for="(item, index) in searchItemArr"
      :key="index"
      class="searchDiv"
      style="display: inline-block"
    >
      <!-- 文本框 -->
      <el-form-item v-if="item.type != 'select' && item.type!='date'">
        <el-input
          v-model="searchObj[item.name]"
          :placeholder="item.placeholder"
          @keyup.enter.native="searchItemData"
          clearable
        ></el-input>
      </el-form-item>
      <!-- 下拉框 -->
      <el-form-item v-if="item.type == 'select'">
        <el-select
          v-model="searchObj[item.name]"
          filterable
          clearable
          class="el-select-w"
          :placeholder="item.placeholder"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="ite in item.arr"
            :key="ite.label+ite.value+'option'"
            :label="ite.label"
            :value="ite.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 日期选择框 -->
      <el-form-item  v-if="item.type=='date'">
        <el-date-picker
          v-model="searchObj[item.name]"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          :placeholder="item.placeholder"
        >
        </el-date-picker>
      </el-form-item>
    </div>
    <el-form-item>
      <button_item  :btnItemLabel="$t('query')" :btnItemPlain="true" @onBtnItemClick="searchItemData" />
      <button_item  :btnItemLabel="$t('reset')"  btnItemType="plain" @onBtnItemClick="resetSearchItemData" />
    </el-form-item>
    <slot name="otherContent"></slot>
  </el-form>
</template>
<script>
export default {
  name:'search_item',
  components:{
  },
  data() {
    return {
      searchObj: {},
    };
  },
  props: {
    searchItemArr: {
      default: [], //name代表变量名,placholder代码提示语 
      type: Array,
    },
  },
  created() {
    let obj={}
    this.searchItemArr.forEach(item=>{
      obj[item.name]=''
    })
    this.searchObj={...obj}
  },
  methods: {
    searchItemData() {
      this.$emit("searchItemData", this.searchObj);
    },
    resetSearchItemData() {
      for(let o in this.searchObj){
        this.searchObj[o]=''
      }
      this.searchItemData()
    },
  },
};
</script>